import { useState } from 'react';
import { Carousel, Skeleton } from "antd"
import { useNavigate } from "react-router-dom"
import { DotChartOutlined } from '@ant-design/icons';
interface propsType {
  list?: any
}


function SwiperList({ list: { banner } }: propsType) {
  const navigate = useNavigate()
  // 跳转轮播图详情
  const goDetail = (item: any) => {
    navigate("/detail" + "?id=" + item.id, { replace: true, state: { query: item?.id } });
  }
  return (
    <div className='w-full h-full relative z-10'>
      <Carousel autoplay dotPosition="bottom" className="">
        {banner.length == 0 ? '' : banner.map((item: any, index: any) => {
          return <img key={index} onClick={() => { goDetail(item) }} className='h-screen cursor-pointer' src={item.imgUrl}></img>
        })}
      </Carousel>
    </div>
  );
}

export default SwiperList;
